<template>
    <div class="Login">
        <el-row type="flex" justify="center">
            <el-col class="LoginOuterBox" :span="7">
                <el-row>
                    <div class="LoginLogo">
                        <el-image style="width: 164px; height: 141.6px" :src="require('@/assets/Clogo.png')"></el-image>
                    </div>
                </el-row>
                <el-row>
                    <div class="LoginTitle">
                        <span>学术分享成果平台</span>
                    </div>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="17">
                        <div class="LoginName">
                            <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="17">
                        <div class="LoginPwd">
                            <el-input @keyup.enter.native="Login" v-model="form.password" placeholder="请输入密码" show-password></el-input>
                        </div>
                    </el-col>
                </el-row>
                <el-row type="flex" justify="center">
                    <el-col :span="18">
                        <div class="LoginButton">
                            <el-button type="primary" @click="Login">登录</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="Register">
                            <span>还没有账号？</span><span>&nbsp;</span><span class="registerSpan" @click="toRegister">点击注册</span><br>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="Forget">
                            <span>忘记密码？</span><span>&nbsp;</span><span class="forgetSpan" @click="toForget">点这里</span>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: "LoginPage",
    components: {
    // Header,
    },
    data() {
        return {
            form: {
                email:'',
                password:'',
            }
        }
    },
    methods: {
        toRegister() {
            this.$router.push("/register");
        },
        toForget() {
            this.$router.push("/resetpwd");
        },
        Login() {
            if (this.form.email == "" || this.form.password == "") {
                this.$message.warning("邮箱/用户名和密码不可为空");
                return;
            }

            const formData = new FormData();
            formData.append("email", this.form.email);
            formData.append("password", this.form.password);

            this.$axios({
                method: "post",
                url: "/api/login",
                data: formData,
            })
            .then((res) => {
                console.log(res);
                if(res.data.errno === 100000) { 
                    this.$message.success(res.data.msg);
                    console.log("SESSIONID" + res.data.post.session_id);
                    sessionStorage.setItem('email',res.data.post.email);
                    sessionStorage.setItem('username',res.data.post.username);
                    sessionStorage.setItem('realname',res.data.post.real_name);
                    sessionStorage.setItem('userId',res.data.post.userId);
                    localStorage.setItem('storeState', true);

                    document.cookie = res.data.post.session_id;
                    
                    setTimeout(() => {
                        this.$router.push("/");
                    }, 500);
                }
                else {
                    this.$message.warning(res.data.msg);
                }
            })
            .catch((err) => {
                console.log(err);
            })
        }
    }    
}
</script>

<style scoped>
.Login{
    height: 100vh;
    width: 100%;
    background-color: #efefef;
}
.LoginOuterBox {
  margin-top: 110px;
  height: 525px;
  background: rgb(255, 255, 255);
  border-radius: 20px;
  box-shadow: 0px 0px 10px 5px #d4d4d4;
  padding-top: 20px;
  text-align: center;
  /* border: 1px solid black; */
}
.LoginLogo {
  /* border: 1px solid black; */
}
.LoginTitle {
  font-size: 22px;
  letter-spacing: 2px;
  color: rgb(144, 140, 140);
  margin-top: 5px;
  /* border: 1px solid black; */
}
.LoginName{
  margin-top: 30px;
  /* border: 1px solid black; */
}
.LoginPwd{
  margin-top: 20px;
  /* border: 1px solid black; */
}
.LoginButton {
  margin-top: 35px;
}
.el-button--primary {
  background-color: rgb(145, 162, 255);
  border: none;
  height: 50px;
  width: 230px;
  font-size: 20px;
  font-weight: bold;
}
.el-button--primary:hover {
  background-color: rgb(160, 174, 255);
}
.LoginName ::v-deep .el-input__inner, .LoginPwd ::v-deep .el-input__inner{
  height: 50px;
}
.LoginName ::v-deep .el-input__inner:focus, .LoginPwd ::v-deep .el-input__inner:focus{
border-color: rgb(70, 70, 207);
}
.Register {
  margin-top: 20px;
  padding: 10px;
  background: rgb(236, 236, 236);
  /* border: 1px solid black; */
}
.Register span, .Forget span {
  /* font-size: 18px; */
  color: rgb(99, 98, 98);
}
.registerSpan, .forgetSpan {
  color: rgb(41, 116, 190) !important
}
.registerSpan:hover, .forgetSpan:hover {
  cursor: pointer;
  text-decoration: underline;
  color: rgb(99, 177, 255) !important
}
.Forget {
  background: rgb(236, 236, 236);
  padding: 5px;
}
</style>